若是鍵盤沒有之前教的設定 next 與 go 的機制
打完字過後鍵盤就會收不起來
這邊來跟大家分享一個叫做 TouchableWithoutFeedback 的 RN 元件
在手機裝置打完字後，點擊螢幕就可以將鍵盤收起來
一起讓使用者有良好的體驗吧！

使用時機

有使用 input 系列元件，凡是會有鍵盤出現的 screens 都可以使用！

使用方法

1. 在有使用 input 的 screen 引入元件

import { TouchableWithoutFeedback, Keyboard } from "react-native";

2. 在元件最外層包上

    <TouchableWithoutFeedback
      onPress={Keyboard.dismiss}
      accessible={false}
    >
    </TouchableWithoutFeedback>

做成 HOC

1. 於 utils/ 創建 HOCDismissKeyboard.js

import React from "react";
import { TouchableWithoutFeedback, Keyboard } from "react-native";

export const HOCDismissKeyboard = ({ children }) => {
  return (
    <TouchableWithoutFeedback
      style={{ margin: 5 }}
      onPress={Keyboard.dismiss}
      accessible={false}
    >
      {children}
    </TouchableWithoutFeedback>
  );
};

2. 於需要使用的頁面引入

import { HOCDismissKeyboard } from "../utils/HOCDismissKeyboard";

3. 將他包在整個元件外面

    <HOCDismissKeyboard>
        // 元件內容
    </HOCDismissKeyboard>

Day 27 done 鍵盤部份到一段落！請大家多多指教